<template>
  <div class="container">
    <!-- 用v-bind将两个组件之间测参数联系来 -->
    <v-loading v-bind:loading="loading"></v-loading>
    <div class="meida-list" v-if="showMovie">
      <div class="media clearfix" v-for="item in movieList" v-on:click="showMovieMsg(item.id)">
        <div class="media-left">
          <a href="javascript:;">
            <img class="media-object" v-bind:src="item.images.large">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading" v-text="item.title"></h4>
          <p v-text="'评分：' + item.rating.average"></p>
          <!-- vue2.0 中 v-text 不能使用过滤器 -->
          <p>导演：{{ item.directors | getNames }}</p>
          <p>主演：{{ item.casts | getNames }}</p>
          <p>类型：{{ item.genres | getGenres }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getMovie } from '../config/api.js'
  import { getNames, getGenres } from '../config/filter.js'
  import loading from '../page/loading.vue'
  export default {
    props: ['movieType'],
    data () {
      return {
        /* movieType: 'in_theaters', */
        /* movieType: 'coming_soon', */
        movieList: {},
        loading: true,
        showMovie: false
      }
    },
    /* mounted 是声明周期hook函数 在页面加载完成之后执行 */
    mounted: function () {
      const movieType = this.movieType
      /* 获取数据 */
      getMovie(this.$http, movieType)
      .then((response) => {
        this.loading = false
        this.showMovie = true
        this.movieList = response.body.subjects
      }, (response) => {
        this.$router.push({
          path: '/page404'
        })
      })
    },
    filters: {
      getNames,
      getGenres
    },
    methods: {
      showMovieMsg: function (key) {
        this.$router.push({
          path: './movieMsg/' + key
        })
      }
    },
    components: {
      'v-loading': loading
    }
  }
</script>
